<script setup>
defineProps({
  hideTimestamp: {
    type: Boolean,
    default: false
  },
  contents: {
    type: Array
  }
})

</script>

<template>
  <ul class="timeline">
    <li v-for="(v, i) in contents" :key="i" class="timeline-item">
      <div class="item-line">
        <div class="tail"></div>
        <div class="dot" :style="{ backgroundColor: v.dotColor }"></div>
      </div>
      <div class="item-wrapper">
        <div v-if="!hideTimestamp" class="item-date">
          {{ v.timestamp }}
        </div>
        <RouterLink :to='{ path: `/article/${v.content}/index` }'>
          <div class="item-content"> {{ v.content }} </div>
        </RouterLink>
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.timeline-item {
  list-style-type: none;
  margin: 0 10px;
  display: flex;
  justify-content: start;

  &:last-child .tail {
    display: none;
  }
}

.item-line {
  position: relative;
  top: 5px;
}

.dot {
  background-color: #047533;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  margin-right: 10px;
  align-self: center;
  position: relative;
}

.tail {
  border-left: 2px solid #6b7075;
  height: 100%;
  position: absolute;
  left: 5px;
}

.item-wrapper {
  margin-bottom: 10px;
}

.item-date {
  font-weight: bold;
  margin-bottom: 5px;
}

.item-content {
  background-color: var(--bgc-04);
  padding: 10px;
  border-radius: 2px;
  box-shadow: 2px 4px 7px rgba(27, 50, 32, 0.474);
  flex: 1;
  margin-bottom: 15px;
}
</style>